<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">
    <title></title>
</head>
<body>
<!--------------------加载前的动画-begin------------------------------>
<!--<div class="site-welcome active" id="siteWelcome" th:fragment="loading">-->
<!--    <div class="loading">-->

<!--    </div>-->
<!--</div>-->
<!--------------------加载前的动画-end------------------------------>

<!--------------------头部-begin------------------------------>
<header id="lk_header" th:fragment="header(n)">
    <!--上部分-->
    <div class="top-bar d-none d-sm-none d-md-none d-lg-block text-center text-muted">
        <div class="container">
            <div class="row">
                <div class="top-bar-1 col-md-2">
                    <a href="" class="text-muted">
                        <i class="icon-phone"></i>
                        <span>关注微信号</span>
                        <img src="../static/images/ewm_lk.jpg" th:src="@{/images/ewm_lk.jpg}" alt="" style="width: 120px;">
                    </a>
                </div>
                <div class="top-bar-2 col-md-5">
                    <i class="icon-tel"></i>
                    <span>188-8888-8888（服务时间：9:00-21:00）</span>
                </div>
                <div class="top-bar-3 col-md-2">
                    <a href="" class="text-muted">公司合作</a>
                </div>
                <div class="top-bar-4 col-md-3" th:if="${session.user==null}">
                    <a class="btn btn-lk btn-sm" href="/register" th:href="@{/register}">免费注册</a>
                    <a href="/login" class="ml-2 text-muted" th:href="@{/login}">立即登录</a>
                </div>
                <div class="top-bar-4 col-md-3" th:if="${session.user!=null}">
                    <!-- 用户登录显示 -->
                    <img src="../static/images/defaulticon.jpg" class="rounded" th:src="@{/images/defaulticon.jpg}" style="height: 40px">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span th:text="${session.user.username}">mmimo</span>
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="/logout">退出登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--下部分-->
    <nav class="navbar navbar-expand-lg navbar-light navbar-lk bg-light">
        <div class="container">
            <a class="navbar-brand d-flex justify-content-center align-items-center" href="#" th:href="@{/}">
                <!--               <h2 class="mt-2 text-primary"><strong>INSTAR</strong></h2>-->
                <img src="../static/images/title.png" th:src="@{/images/title.png}" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#lk_nav"
                    aria-controls="lk_nav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="lk_nav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item" th:classappend="${n==1} ? 'active'">
                        <a class="nav-link" href="#" th:href="@{/}">产品中心</a>
                    </li>
                    <li class="nav-item" th:classappend="${n==2} ? 'active'">
                        <a class="nav-link" href="#" th:href="@{/video}" >视频教程</a>
                    </li>
                    <li class="nav-item" th:classappend="${n==3} ? 'active'">
                        <a class="nav-link" href="#" th:href="@{/material}" >资料下载</a>
                    </li>
                    <li class="nav-item" th:classappend="${n==4} ? 'active'">
                        <a class="nav-link" href="#">开源社区</a>
                    </li>

                </ul>
<!--                <form class="form-inline pl-3 pr-3">-->
<!--                    <div class="input-group">-->
<!--                        <div class="input-group-prepend">-->
<!--                            <span class="input-group-text" id="basic-addon1">帖子</span>-->
<!--                        </div>-->
<!--                        <input type="text" class="form-control" placeholder="请输入你要搜索的帖子" aria-label="search" aria-describedby="basic-addon1">-->
<!--                    </div>-->
<!--                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>-->
<!--                </form>-->
            </div>
        </div>
    </nav>
</header>
<!--------------------头部-end------------------------------>

<!--------------------尾部-begin------------------------------>
<footer id="lk_footer" th:fragment="footer">
    <div class="container">
        <div class="row d-flex justify-content-between align-items-center">
            <div class="col-lg-8 d-none d-sm-none d-md-none d-lg-block">
                <div class="row  d-flex justify-content-center align-items-center">
                    <div class="col-lg-2">
                        <a href="#" th:href="@{/}">产品中心</a>
                    </div>
                    <div class="col-lg-2">
                        <a href="#" th:href="@{/video}">视频教程</a>
                    </div>
                    <div class="col-lg-2">
                        <a href="#" th:href="@{/material}">资料下载</a>
                    </div>
                    <div class="col-lg-2">
                        <a href="#">开源社区</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 d-none d-sm-none d-md-block">
                <h6>联系我们:</h6>
                <a class="contact" href="">
                    <img data-src="../static/images/weixin-h.png" th:data-src="@{/images/weixin-h.png}" width="70" alt="">
                    <img class="image img-thumbnail" src="../static/images/ewm_lk.jpg" th:src="@{/images/ewm_lk.jpg}" alt="" style="width: 120px;">
                </a>
                <a class="contact" href="">
                    <img data-src="../static/images/xinlang-h.png" th:data-src="@{/images/xinlang-h.png}" width="70" alt="">
                    <img class="image img-thumbnail" src="../static/images/ewm_lk.jpg" th:src="@{/images/ewm_lk.jpg}" alt="" style="width: 120px;">
                </a>
            </div>

        </div>
    </div>
    <div class="container document" >
        <span>福建乐基科技有限公司</span>
<!--        <img data-src="../static/images/gongan.png" th:data-src="@{/images/gongan.png}"  alt="">-->
        <a id="footer_link" href="https://beian.miit.gov.cn/" target="_blank" >闽ICP备2021002236号</a>
    </div>

</footer>
<!--------------------尾部-end------------------------------>


<th:block>
    <script src="../static/js/jquery-3.3.1.js" th:src="@{/js/jquery-3.3.1.js}"></script>
    <script src="../static/js/popper.js" th:src="@{/js/popper.js}"></script>
    <script src="../static/js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
    <script>
        const HOST = window.location.host;
    </script>
<!--    <script>-->
<!--        //当代码加载到这里的时候,执行这个script,当代码加载到这里,说明loading该结束了-->

<!--        window.onload=function(){-->
<!--            var siteWelcome = document.getElementById('siteWelcome');-->
<!--            siteWelcome.classList.remove('active');-->
<!--        }-->
<!--    </script>-->
</th:block>

</body>
</html>
